<template>
  <div id="fullScreenElem">
    <el-row :gutter="24">

      <el-col :span="24">
        <el-card style="margin-bottom: 10px">
          
          当前试卷分数：{{totalScore}}

          <el-button v-if="!showAll" style="float: right; margin-top: -10px" type="primary" :loading="loading" @click="handHandExam()">
            交卷
          </el-button>

          <div v-else style="float: right; margin-top: -10px">
            <el-button type="success" icon="el-icon-check" size="mini" @click="handInPaper">确认交卷</el-button>
            <el-button icon="el-icon-circle-close" size="mini" @click="changeShowAll">返回</el-button>
          </div>
        </el-card>
      </el-col>
 
      <div v-if="!showAll">

        <!-- 答题卡 -->
        <el-col :span="6" :xs="24" style="margin-bottom: 10px">

          <el-card>

            <p class="card-title">试题卡</p>
            <el-row :gutter="24" class="card-line" style="padding-left: 10px">
              <el-tag type="info">无法评分</el-tag>
              <el-tag type="warning">机器评分</el-tag>
              <el-tag type="success">老师评分</el-tag>
            </el-row>

            <div v-for = "(questions,qType ,i) in paperData" :key="i">
              <p class="card-title">{{questionType(qType)}}</p>
              <el-row :gutter="24" class="card-line">
                <el-tag  v-for="(q,j) in questions" :key="j" :type="cardItemClass(q.isMarked,q.id)" @click="handSave(q)"> {{ q.tiNumber }}</el-tag>
              </el-row>
            </div>

          </el-card>

        </el-col>

        <!-- 正中央一道题显示界面 -->
        <el-col :span="18" :xs="24">

          <el-card class="qu-content">
            <p v-if="cardItem">{{ cardItem.tiNumber}}.(分值{{cardItem.score}})
              <!-- 该题评分的状态 -->
              <el-tag  :type="markClass(cardItem.isMarked)"> {{ markType(cardItem.isMarked) }}</el-tag>
              <span v-html="cardItem.name"></span>
            </p>
            <!-- 答案区域 -->
            <h4>参考答案：</h4><span v-html="cardItem.answer?cardItem.answer:'无参考答案'"></span><br>
            <h4>学生提交答案：</h4><span v-html="cardItem.stuAnswer?cardItem.stuAnswer:'无答案'"></span><br>
            <!-- 评分区 -->
            <div style="text-align:center">
              打分
              <el-input-number size="small" v-model="cardItem.stuScore" :precision="1" :step="0.1" :max="cardItem.score" :min="0"></el-input-number>
            </div>
          </el-card>
          
          <!-- 切换题目按钮 -->
          <div style="margin-top: 20px">
            <el-button v-if="showPrevious" type="primary" icon="el-icon-back" @click="handPrevious()">
              上一题
            </el-button>

            <el-button v-if="showNext" type="warning" icon="el-icon-right" @click="handNext()">
              下一题
            </el-button>

          </div>

        </el-col>

      </div>

      <!-- 总览 -->
      <div v-else style="padding: 10px 5%" class="box-card">
        <!-- 试卷展示 -->
        <div v-for = "(questions,qType ,i) in paperData" :key="i">
            <hr>
            <h4>{{questionType(qType)}}</h4> 
            <el-card  v-for="(q,j) in questions" :key="j" style="padding: 10px 20px">
                <el-divider><span style="color: rgb(239,160,48)">(分值：{{q.score}})</span></el-divider>
                <p class="title">第{{j+1}}题</p>
                <span class="title" v-html="q.name" style="margin: 20px"></span>
                <br>
                <br>
                <p>参考答案：</p>
                <span v-html="q.answer?q.answer:'无参考答案'" style="margin: 20px"></span>
                <br>
                <p>学生答案：</p>
                <span v-html="q.stuAnswer?q.stuAnswer:'无答案'" style="margin: 20px"></span>
                <p>您的评分：</p>
                <span style="margin: 20px">{{q.stuScore!=null?q.stuScore+'分':'没有分数'}}</span>
            </el-card >
        </div>
        <!-- 按钮 -->
        <div style="text-align:center">
          <el-button type="success" icon="el-icon-check" size="mini" @click="handInPaper">确认交卷</el-button>
          <el-button icon="el-icon-circle-close" size="mini" @click="changeShowAll">返回</el-button>
        </div>
      </div>

    </el-row>
  </div>
</template>

<script>
export default {
  name:'singleMarking',
  data() {
    return {
      exam_info:{
        // 试卷ID
        paperId: '',
        // 考试ID
        examId:'',
        // 学生id
        stuId:'',
      },
      socket:null,
      msg:{},
      // 全展示
      showAll:false,
      // 提交试卷按钮转圈圈
      loading: false,
      //上一道题，下一道题按钮显示问题
      showPrevious: false,
      showNext: true,
      // 当前答题卡
      cardItem: {},
      // 题目总数组
      allItem:[],
      // 试卷信息
      paperData: {},
      // 存储一下题型字典
      typeList:[],
      // 试卷分数
      totalScore:0,
    }
  },
  mounted() {
    this.exam_info = JSON.parse(this.$route.query.exam_info);
    //建立连接，发送消息
    this.openSocket();
    this.getTypeList();
    this.getPaperData();
  },
  beforeDestroy(){
    this.global.ws.close();
  },
  methods: {
    // 发送消息
    async sendMessage() {
      if(typeof(WebSocket) == "undefined") {
          console.log("您的浏览器不支持WebSocket");
      }else {
          // console.log("您的浏览器支持WebSocket");
          var toUserId = '';
          if(result.code==20000){
            toUserId = result.data.studentId;
          }
          toUserId += '-'+this.exam_info.id + '-0';
          var msgInfo = document.getElementById('msgInfo').value;
          var msgType = document.getElementById('msgType').value;
          var msg = '{"toUserId":"'+toUserId+'","msgInfo":"'+msgInfo+'","msgType":"'+msgType+'"}';
          console.log(msg);
          socket.send(msg);
      }
    },
    // 打开连接
    async openSocket() {
      if(typeof(WebSocket) == "undefined") {
          console.log("您的浏览器不支持WebSocket");
      }else{
          console.log("您的浏览器支持WebSocket");
          //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
          var that = this;
          var singleId = this.exam_info.stuId +'-'+this.exam_info.examId + '-3';
          // var socketUrl="ws://127.0.0.1:22599/webSocket/"+userId;
          var socketUrl="ws://jnexam.natapp1.cc/webSocket/web-socket-server/"+singleId;
          console.log(socketUrl);
          if(this.socket != null){
              this.socket.close();
              this.socket=null;
          }
          this.socket = new WebSocket(socketUrl);
          //替代全局里的ws，方便调用
          this.global.setWs(this.socket);
          console.log(this.global.ws);
          //打开事件
          this.socket.onopen = function() {
              console.log("websocket已打开");
              //socket.send("这是来自客户端的消息" + location.href + new Date());
          };
          //获得消息事件
          this.socket.onmessage = function(msg) {
              var serverMsg = "收到服务端信息：" + msg.data;
              console.log(serverMsg);
              //发现消息进入    开始处理前端触发逻辑
              that.msg = JSON.parse(msg.data);
          };
          //关闭事件
          this.socket.onclose = function() {
              console.log("websocket已关闭");
          };
          //发生了错误事件
          this.socket.onerror = function() {
              console.log("websocket发生了错误");
          }
      }
    },
    // 计算总分
    getTotalScore(){
      let totalScore = 0

      this.allItem.forEach(function(item) {
        if (item.stuScore!=null) {
          totalScore += item.stuScore
        }
      })
      // 不知道为啥会算两遍
      return totalScore
    },
    // 真正的交卷 
    async handInPaper(){
      const that = this;
      // 交卷需要等待
      const loading = this.$loading({
        lock: true,
        text: '试卷打包中，请不要刷新界面，等待自动跳转...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      // 此处应该要关闭socket
      this.global.ws.close();

      // 调用交卷接口函数,据说怕交卷会卡，建议打包试卷的状态久一点
      let studentConnection = {
        examId:this.exam_info.examId,
        studentId:this.exam_info.stuId,
        // 是否以阅卷
        isMarked:1,
        // 考试总分
        totalScore:this.getTotalScore()/2,
      }
      setTimeout(() => {}, 2000);
      let result = await this.$API.marking.updateExamStudentConnectionFromTeacher(studentConnection);
      // 成功交卷后，跳转到考试界面吧
      if(result.code==20000){
        setTimeout(() => {
          loading.close();
          // 好像如果想实现批完回到学生列表重复批阅得把参数带着，淦
          that.$router.go(-1);
        }, 2000);
      }
    },
    // 改变全览的状态
    changeShowAll(){
      this.showAll = !this.showAll;
    },
    // 把当前的cardItem上传保存
    async submitItem(){
      let result = await this.$API.marking.markQuestion(this.cardItem.id,this.exam_info.stuId,this.cardItem.stuScore);
      if(result.code==20000){
        // 这都是为了不刷新的话，怎么保证数据也会更新，不用再次调用接口
        // 修改当前题目的分数
        this.allItem[this.cardItem.tiNumber-1].stuScore = this.cardItem.stuScore;
        // 修改当前题目的批阅状态
        this.allItem[this.cardItem.tiNumber-1].isMarked = 1;
        this.$message({
          message: '保存成功',
          type: 'success'
        });
      }
      this.totalScore = this.getTotalScore();
    },
    // 拿一道题目
    fetchData(item){
      // 获得详情
      this.cardItem = item;
    },
    // 通过题目选项卡切换，趁机保存答案
    handSave(item) {
      // 第一题，不显示pre按钮
      if (item.id === this.allItem[0].id) {
        this.showPrevious = false
      } else {
        this.showPrevious = true
      }

      // 最后一个索引
      const last = this.allItem.length - 1
      // 最后一道题，应该不能有next按钮
      if (item.id === this.allItem[last].id) {
        this.showNext = false
      } else {
        this.showNext = true
      }

      // 此处应该先保存当前cardItem里的题目评分，
      // 不过不考虑是否真的有评分，有点不讲道理了
      this.submitItem();
      
      // 切换当前显示题目的内容
      this.fetchData(item);
      
    },
    // 答题卡样式
    cardItemClass(isMarked,currentId) {
      //这玩意是一次性遍历所有题目，检测的
      //这个状态是当前选中的题目编号，会变成warning色
      if (currentId === this.cardItem.id) {
        return 'danger'
      }

      if (isMarked==0) {  //停留在机器评分中
        return 'warning'
      }

      if (isMarked==1) {  //老师人工评分过
        return 'success'
      }

      if (isMarked==null) { //无法评分
        return 'info'
      }
    },
    // 返回题目的类型
    questionType(q){
        return this.typeList[q*1-1].type;
    },
    // 评分状态样式
    markClass(isMarked){
      if(isMarked==null){
        return 'info'
      }

      if(isMarked==0){
        return 'warning'
      }

      if(isMarked==1){
        return 'success'
      }
    },
    // 评分状态内容
    markType(isMarked){
      if(isMarked==null){
        return '无法评分'
      }

      if(isMarked==0){
        return '有机器评分'
      }

      if(isMarked==1){
        return '老师已评分'
      }
    },
    // 获得题型字典
    async getTypeList() {
      //获取专业分类的请求，不需要携带参数
      let result = await this.$API.question_management.reqGetTypeList();
      if(result.code==20000){
        this.typeList = result.data.typeList;
      }
    },
    // 获得变化的试卷信息,学生刷新也不怕
    async getPaperData(){
      let result = await this.$API.marking.markingStudentPaper(this.exam_info.examId,this.exam_info.paperId,this.exam_info.stuId);
      if(result.code==20000){
        this.paperData = result.data.question;
        // 获得第一题内容
        for(var i=0;i<this.typeList.length;i++){
          // 获取键key
          var key = this.typeList[i].id;
          // 寻找第一个有题目的题目类型
          if (this.paperData[key]) {
            this.cardItem = this.paperData[key][0];
            break;
          }
        }

        // 想要保存所有题目
        const that = this
        // 这么做的无奈之处是，马子说题型万一动起来了咋办，键key我假装不知道，循环处理
        var indexNum = 1;
        for(var i=0;i<this.typeList.length;i++){
          // 获取键key
          var key = this.typeList[i].id;
          if(this.paperData[key]){
            this.paperData[key].forEach(function(item) {
              that.allItem.push(Object.assign(item,{tiNumber:indexNum}));
              indexNum++;
            })
          }
        }

        // 逻辑上这时去渲染题目
        this.fetchData(this.cardItem);
      }
    },
    // 下一道题响应函数
    handNext(){
      const index = this.cardItem.tiNumber
      this.handSave(this.allItem[index])
    },
    // 上一道题响应函数
    handPrevious(){
      const index = this.cardItem.tiNumber - 2
      this.handSave(this.allItem[index])
    },
    // 统计没有分数的题目
    countNotScore() {
      let notScore = 0

      this.allItem.forEach(function(item) {
        if (item.stuScore==null) {
          notScore += 1
        }
      })

      return notScore
    },
    // 进入预览界面
    enterAllDetails(){
      // 重新拿到数据
      this.getPaperData();
      // 考虑页面直接整个上移，用一个card用已有的信息展示试卷
      this.showAll = true;
    },
    // 初步交卷，第一道门槛
    // 如果题目未全部答完，发送弹窗确定交卷吗
    // 进入试卷全局展览，方便检查
    // 最后一道题，可能还没提交，这里再次保存一下
    handHandExam(){
      // 把当前题目在保存一次，保证全部提交
      this.submitItem();
      // 判断题目批阅情况
      let noScoreNum = this.countNotScore();
      if(noScoreNum!=0){
        //还有题目没批完，提出弹窗，提醒老师
        //弹框，但不致命，因为此时
        this.$confirm(`你还有${noScoreNum}道题目还未批阅，你确定停止批卷么?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(async() => {
          //当用户点击确定按钮时会触发
          //老师想要强行进入预览界面，最后一面
          this.enterAllDetails();
          }).catch(() => {
          //当用户点击取消按钮时会触发
            this.$message({
              type: 'info',
              message: '注意是否分数已填'
            });          
        });
      }else{
        // 题目都答完，那不是顺理成章，直接进入预览模式
        this.enterAllDetails();
      }
    },
  },
}
</script>

<style>
.title{
  font-size: 19px;
  font: bold;
}
.qu-content div{
    line-height: 30px;
}
.card-title{
    background: #eee;
    line-height: 35px;
    text-align: center;
    font-size: 14px;
}
.card-line{
  padding-left: 10px
}
.card-line span {
  cursor: pointer;
  margin: 2px;
}
</style>